<!-- 左侧导航 -->
<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
      >
        <!-- 一级菜单 -->
        <template v-for="(item, index) in routesArr">
          <router-link
            :key="index"
            v-if="!item.children"
            :to="'/layout/' + item.path"
          >
            <el-menu-item :index="item.path">
              <i :class="item.meta.icon"></i>
              <span slot="title">{{ item.meta.title }}</span>
            </el-menu-item>
          </router-link>

          <!-- 一 级菜单 -->
          <el-submenu :index="item.path" v-else :key="index">
            <template slot="title">
              <i :class="item.meta.icon"></i>
              <span>{{ item.meta.title }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item-group>
              <router-link
                v-for="item1 in item.children"
                :key="item1.name"
                :to="'/layout/' + item.path + '/' + item1.path"
              >
                <el-menu-item index="1-1">
                  <i :class="item1.meta.icon"></i>
                  <span>{{ item1.meta.title }}</span>
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
        </template>
        <!--  -->
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
//这里可以导入其他文件
import eventBus from '../../utile/eventBus'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      routesArr: [],
      isCollapse: false,      //折叠菜单
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {

  },
  created () {
    // console.log(this.$route);
    this.routesArr = this.$store.state.routes[1].children

    // 接收数据
    eventBus.$on('tran', (m) => {
      this.isCollapse = m
    });
  },
  //方法集合
  methods: {
    handleOpen (key, keyPath) {
      //   console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      //   console.log(key, keyPath);
    }
  }
}
</script>
<style  scoped>
/* .tac {
  width: 100%;
} */
</style>